<!doctype html>
<html class="no-js">

<head>
    {{> meta}}

    <!-- Metis Theme stylesheet -->
    <link rel="stylesheet" href="{{assets}}/css/theme.css">

{{> rtl-style}}

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>
    <div id="wrap">
        <div id="top">

            <!-- .navbar -->
            <nav class="navbar navbar-inverse navbar-{{#if fixedNav}}fixed{{else}}static{{/if}}-top">
                <div class="container-fluid">


                    <!-- Brand and toggle get grouped for better mobile display -->
                    <header class="navbar-header">
                        <a href="index.html" class="navbar-brand"><img src="{{assets}}/img/logo.png" alt=""></a>
                    </header>



                    <div class="topnav">
                        <div class="btn-group">
                            <a data-placement="bottom" data-original-title="Show / Hide Left" data-toggle="tooltip" class="btn btn-primary btn-sm toggle-left">
                                <i class="fa fa-bars"></i>
                            </a>
                            <a data-placement="bottom" data-original-title="Show / Hide Right" data-toggle="tooltip" class="btn btn-default btn-sm toggle-right">
                                <span class="glyphicon glyphicon-comment"></span>
                            </a>
                        </div>

                    </div>

                </div>
                <!-- /.container-fluid -->
            </nav>
            <!-- /.navbar -->

            <header class="head">
                <div class="search-bar">
                    {{> mainSearch }}
                </div>
                <!-- /.search-bar -->

                <div class="main-bar">
                    <h3><i class="{{ icon }}"></i> {{ title }}</h3>
                </div>
                <!-- /.main-bar -->
            </header>
            <!-- /.head -->
        </div>
        <!-- /#top -->
        <div id="left">
            <p>LEFT</p>
        </div>
        <!-- /#left -->
        <div id="content">
            <div class="outer">
                <div class="inner">
                    {% body %}
                </div>
                <!-- /.inner -->
            </div>
            <!-- /.outer -->
        </div>
        <!-- /#content -->

        <div id="right">
            <p>RIGHT</p>
        </div>
        <!-- /#right -->
    </div>
    <!-- /#wrap -->
    <footer id="footer">
        <p>2014 &copy; Metis Bootstrap Admin Template</p>
    </footer>
    <!-- /#footer -->


    <!--jQuery -->
    <script src="{{assets}}/lib/jquery/jquery{{#if production}}.min{{/if}}.js"></script>

    <!--Bootstrap -->
    <script src="{{assets}}/lib/bootstrap/js/bootstrap{{#if production}}.min{{/if}}.js"></script>


    <!-- Metis core scripts -->
    <script src="{{assets}}/js/core.min.js"></script>

</body>

</html>
